<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
    <style>
        .box {
            width: 30px;
            height: 30px;
            border-radius: 50%; /*border-radius为50%时，则会形成圆 */
            background-color: darkturquoise; 
            display: none; /* “display:none” 是CSS中一种样式属性，
            用于隐藏元素，使其不在页面上显示。*/
            position: fixed;  /* 使元素成为固定元素，并使用top, bottom, left, right,
            来调整相对于浏览器的边的位置*/
            left: 0;
            top: 0;
        }
    </style>
    <body>
        <div class='box'></box>
        <script>
            var div = document.querySelector('div');/*根据选择器获取所需要的div元素 */
            document.onmousemove = function (e) {
            div.style.display = 'block';/* 将元素显示为块级元素 */
            var radius = div.offsetWidth >> 1; /*offsetWidth是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。*/
            e = e || window.event;/*在做事件处理时候区分IE和其他浏览器事件对象时常用的写法。*/
            /*保证对所有浏览器的兼容 */
            var x = e.clientX;/*鼠标相对于浏览器窗口的可视区域的X坐标 */
            div.style.left = x - radius + 'px';
            var y = e.clientY;/*鼠标相对于浏览器窗口的可视区域的Y坐标 */
            div.style.top = y - radius + 'px';
        }
        </script>
    </body>
    

</html>